.clock {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 15px;
  left: 50%;
  margin-left: -75px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../../../assets/images/clock.png);
  background-size: cover;
  border-radius: 50%;
  /* border: 20px solid #fff; */
  /* box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.1),
    0 20px 20px rgba(0, 0, 0, 0.2),
    0 0 0 4px rgba(255, 255, 255, 1); */

}

.clock::before {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  background: #848484;
  border: 2px solid #fff;
  z-index: 10;
  border-radius: 50%;
}

.hour,
.min,
.sec {
  position: absolute;
}

.hour,
.hr {
  width: 70px;
  height: 70px;
}

.min,
.mn {
  width: 90px;
  height: 90px;
}

.sec,
.sc {
  width: 110px;
  height: 110px;
}

.hr,
.mn,
.sc {
  display: flex;
  justify-content: center;
  position: absolute;
  border-radius: 50%;
}

.hr::before {
  content: '';
  position: absolute;
  width: 5px;
  height: 55px;
  background-color: #848484;
  z-index: 10;
  border-radius: 6px 6px 0 0;
}

.mn::before {
  content: '';
  position: absolute;
  width: 3px;
  height: 67px;
  background-color: #d6d6d6;
  z-index: 11;
  border-radius: 6px 6px 0 0;
}

.sc::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 90px;
  background-color: #ff6767;
  z-index: 12;
  border-radius: 6px 6px 0 0;
}
